<template>
  <div class="main-table">
    <div class="header">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formSearch.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formSearch.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="phone" label="电话">
        <template #default="{ row }">
          <span>
            {{ row.phone || "-" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="day" label="阳寿" />
      <el-table-column prop="birthday" label="生辰八字" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <span>
            {{ row.status == 1 ? "正常" : "死亡" }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :total="num"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import axios from "@/utils/axios";
export default {
  setup() {
    const state = reactive({
      tableData: [],
      num: 0,
      currentPage: 1,
      formSearch: {
        user_rank: 2,
        name: "",
        phone: "",
      },
    });
    onMounted(() => {
      getData();
    });
    const handleCurrentChange = (e) => {
      state.currentPage = e;
      getData();
    };
    const getData = () => {
      let httpOption = axios.post;
      let params = {
        ...state.formSearch,
        page: state.currentPage,
      };
      httpOption("/api/admin/users", params).then((res) => {
        state.tableData = res.data;
        state.num = res.meta.total;
      });
    };
    return {
      getData,
      handleCurrentChange,
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
</style>